<template>
	<div class="home">
		<head-nav-bar>
			<div slot="center">主页</div>
		</head-nav-bar>
		<tap-control 	:title="['流行','精选','新款']" 
									:class="{tapControl:true,hide:isShow,fixed:true}" 
									@tapClick = "tapClick" 
									ref="tapControl1" />
		<scroll class="scroll-content"
						ref="scroll" 
						:probe-type="3" 
						@scroll="scroll" 
						:pull-up-load="true"  
						@pullingUp="loadMore">
			<home-swiper :banner="banner" @swiperImageLoad="swiperImageLoad"></home-swiper>
			<recommend-view :recommends="recommends"></recommend-view>
			<feature-view></feature-view>
			<tap-control 	:title="['流行','精选','新款']" 
										class="tap-control" 
										@tapClick = "tapClick" 
										ref="tapControl2" />
			<goods-list :goods = "goods[currentType].list"></goods-list>
		</scroll>
		<back-top @click.native="backClick" v-show="isActive"></back-top>
	</div>
</template>
<script>
	import headNavBar from 'components/common/headNavBar/headNavBar.vue'
	import homeSwiper from 'views/navBar/home/homeChildren/homeSwiper.vue'
	import {getHomeMultidata,getHomeGoods} from 'network/home.js'
	import recommendView from 'views/navBar/home/homeChildren/homeRecommendView.vue'
	import featureView from 'views/navBar/home/homeChildren/featureView.vue'
	import tapControl from 'components/content/tap-control/tapControl/'
	import goodsList from 'components/content/goods/goodsList'
	import scroll from 'components/common/scroll/scroll'
	import backTop from 'components/content/backTop/backTop'
	export default {
		name:'home',
		components:{
			headNavBar,
			homeSwiper,
			recommendView,
			featureView,
			tapControl,
			goodsList,
			scroll,
			backTop
		},
		data(){
			return {
				banner:[],
				recommends:[],
				goods:{
					'pop':{page:0,list:[]},
					'new':{page:0,list:[]},
					'sell':{page:0,list:[]}
				},
				currentType:'pop',
				isActive:false,
				tapOffsetTop:0,
				isShow:true,
				saveY:0
			}
		},
		created(){
			//1.请求多个数据
			this.getHomeMultidata();
			
			//请求商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')
			//监听图片加载完毕
			this.$bus.$on('itemImageLoad',()=>{
				this.debounce(this.$refs.scroll.refresh(),100)
			})
		},
		activated(){
			this.$refs.scroll.scroll.scrollTo(0,this.saveY,0)
			this.$refs.scroll.refresh();
		},
		deactivated() {
			
			this.saveY = this.$refs.scroll.scroll.y;
		},
		methods:{
			/* 
			*事件监听相关 
			 */
			debounce(func,delay){
				let timer = null;
				return function(){
					if(timer){
						clearTimeout( timer );
					}
					timer = setTimeout( ()=>{
						func.apply(this);
					},delay)
				}
			},
			tapClick(index){
				this.$refs.tapControl1.currentIndex = index;
				this.$refs.tapControl2.currentIndex = index;
				switch( index ){
					case 0:
						this.currentType = 'pop';
						return false;
					case 1:
						this.currentType = 'sell';
						return false;
					case 2:
						this.currentType = 'new';
						return false;
				}
			},
			scroll(position){
				//判断backtop是否显示
				if ( Math.abs(position) >= 1000 ){
					this.isActive = true
				}else{
					this.isActive = false
				}
				//判断吸顶效果是否显示
				if ( Math.abs(position) >= this.tapOffsetTop){
					this.isShow = false
				}else{
					this.isShow = true
				}
			},
			//点击回到顶部回到顶部
			backClick(){
				this.$refs.scroll.scroll.scrollTo(0,0,1000)  ;
			},
				//上拉加载更多
			loadMore(){
				this.getHomeGoods(this.currentType);
				this.$refs.scroll.scroll.finishPullUp(); 
				this.$refs.scroll.scroll.refresh();
			},
			//吸顶效果的实现（判断滚动距离）
			swiperImageLoad(){
				this.tapOffsetTop = this.$refs.tapControl2.$el.offsetTop;
				
			},
			/* 
			 *网络请求相关
			 */
			getHomeMultidata(){
				getHomeMultidata().then( res => {
					this.banner = res.data.data.banner.list;
					this.recommends = res.data.data.recommend.list;
				})
			},
			getHomeGoods(type){
				const page = this.goods[type].page + 1;
				getHomeGoods(type,page).then(res => {
					this.goods[type].list = this.goods[type].list.concat(res.data.data.list)
				})
				this.goods[type].page++;
			}
		}
	}
</script>

<style scoped>
	.home {
		padding: 44px 0 49px;
		height: 100vh;
	}
	.tap-control {

		background: #ef6300;
	}
	.scroll-content {
		position: relative;
		overflow: hidden!important;
		height: calc( 100vh - 93px )!important;
		z-index: 0;
	}
	.hide {
		display: none;
	}
	.fixed{
		position: fixed;
		left: 0;
		right: 0;
		top: 44px;
		z-index:99;
	}
</style>
